/**
 * 远程控制 - 装车控制列表页 - 样式
 * @author xiaoxujs
 */

import styled from "styled-components";

import liaochengno from "../../../assets/image/RemoteControl/liaochang-no.png";
import liaochengok from "../../../assets/image/RemoteControl/liaochang-ok.png";

export const LoadingControlListBox = styled.div`
    padding: 3rem 2rem 0 5rem;
    .lgl-title-button-style{
        width: 11.2rem;
        height: 4rem;
        background: #FFFFFF;
        border-radius: .8rem;
        border: .1rem solid #E9E9E9;
        display: flex;
        align-items: center;
        justify-content: center;
        .lgl-title-button-style-nei{
            width: 10.4rem;
            height: 3.2rem;
            background: #0071E5;
            border-radius: .5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            font-size: 1.4rem;
            color: #FFFFFF;
        }
    }
    .lgl-list-title-box{
        height: 5.7rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 2rem ;
        .lgl-list-title-text{
            font-weight: bold;
            font-size: 1.6rem;
            color: #333333;
            margin-left: 2rem;
        }
    }
    .list-box{
        display: flex;
        flex-wrap: wrap;
        min-height: 30rem;
    }
`
export const LGLItem = styled.div<{
    cardstatus: number
}>`
    width: 34.8rem;
    height: 22.4rem;
    background: ${props => props.cardstatus === 0 ? '#FBFBFB' : '#FFFFFF'};
    border-radius: .4rem;
    margin-right: 2rem;
    margin-bottom: 2rem;
    .look-box{
        height: 16.7rem;
        border-bottom: .1rem solid #EBEEF5;
        .look-one_box{
            padding: 2rem 2rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .look-one-left-box{
                display: flex;
                align-items: center;
                .look-one-image{
                    width: 3.6rem;
                    height: 3.6rem;
                    border-radius: .8rem;
                    background: url(${props => props.cardstatus === 0 ? liaochengno : liaochengok });
                    background-size: 100% 100%;
                    margin-right: 1.1rem;
                }
                .look-one-text{
                    font-weight: bold;
                    font-size: 1.6rem;
                    color: #333333;
                }
            }
        }
        .look-two-item-ip-box{
            height: 1.4rem;
            padding: 2rem 0 0 2rem;
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 1.4rem;
            color: #B1BAC3;
            .iconfont {
                margin-right: 1rem;
            }
        }
        .look-two-item-name-box{
            height: 1.4rem;
            padding: 1.7rem 0 0 2rem;
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 1.4rem;
            color: #B1BAC3;
            .iconfont {
                margin-right: 1rem;
            }
        }
        .look-jindutiao-box{
            padding: 1rem 2rem 0;
        }
    }
    .handle-box{
        height: 5.6rem;
        display: flex;
        .handle-button-box{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
`